<template>
  <div id="menu">
    <div id="logo" :style="{backgroundColor: theme.color.Menu.backgroundColor,overflow: 'hidden'}">

    </div>
    <el-menu
        ref="mainMenu"
        default-active="/index"
        :unique-opened="true"
        :router="true"
        :active-text-color="theme.color.Menu.activeTextColor"
        :background-color="theme.color.Menu.backgroundColor"
        :text-color="theme.color.Menu.textColor"
    >
      <template v-for="empty in menuTree">
        <SubMenu v-if="empty.empty.path===''" :data="empty"/>
        <Menu v-else :data="empty"/>
      </template>

      <!--      <el-menu-item  index="/index/home" @click="addWindows('/index/home','首页')">
              <el-icon><House /></el-icon>
              <template #title>
                <span >首页</span>
              </template>
            </el-menu-item>

            <el-sub-menu index="4">
              <template #title>
                <el-icon><User /></el-icon>
                  <menu-text>个人页</menu-text>
              </template>
              <el-menu-item index="/index/menu/userPage"  @click="addWindows('/index/menu/userPage','个人中心')">
                <template #title>
                  <el-icon>
                    <User/>
                  </el-icon>
                    <menu-text>个人中心</menu-text>
                </template>
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="5">
              <template #title>
                <el-icon><setting /></el-icon>
                  <menu-text>系统管理</menu-text>
              </template>
              <el-menu-item index="/index/menu/account"  @click="addWindows('/index/menu/account','账号管理')">
                <template #title>
                  <el-icon>
                    <UserInfoIcon/>
                  </el-icon>
                    <menu-text>账号管理</menu-text>
                </template>
              </el-menu-item>
              <el-menu-item index="/index/menu/orgManage"  @click="addWindows('/index/menu/orgManage','组织管理')">
                <template #title>
                  <el-icon><OrgManageIcon /></el-icon>
                  <menu-text>组织管理</menu-text>
                </template>
              </el-menu-item>

              <el-menu-item index="/index/menu/organization"  @click="addWindows('/index/menu/organization','组织架构')">
                <template #title>
                  <el-icon>
                    <OrgIcon/>
                  </el-icon>
                  <menu-text>组织架构</menu-text>
                </template>
              </el-menu-item>

              <el-menu-item index="/index/menu/roleManagement"  @click="addWindows('/index/menu/roleManagement','角色管理')">
                <template #title>
                  <el-icon><RoleManageIcon /></el-icon>
                  <menu-text>角色管理</menu-text>
                </template>
              </el-menu-item>

            </el-sub-menu>

            <el-sub-menu index="6">
              <template #title>
                <el-icon><crop /></el-icon>
                <menu-text>系统配置</menu-text>
              </template>

              <el-menu-item index="/index/menu/menuConfiguration"  @click="addWindows('/index/menu/menuConfiguration','系统菜单')">
                <template #title>
                  <el-icon><Operation /></el-icon>
                  <menu-text>菜单配置</menu-text>
                </template>
              </el-menu-item>
            </el-sub-menu>-->
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import {useThemeStore} from "../../store/theme.js";
import {useWindowsStore} from "../../store/windows.js";
import {onMounted, onUnmounted, ref} from "vue";
import Axios from "../../plugins/axios";
import {sys} from "../../model/system";
import SubMenu from "./SubMenu.vue";
import Menu from "./Menu.vue";
import event from "../../plugins/event";
import {UpdateMenu, UpdateOrgAndRoleEvent} from "../../plugins/evenKey";
import {userStore} from "../../store/user";

const theme = useThemeStore()
const windowLabels = useWindowsStore()
const user = userStore()

const menuTree = ref([])


function init() {
  Axios.get('/api/configuration/menu/our/tree', {
    params: {
      orgId: user.userInfo.org,
      roleId: user.userInfo.role,
    }
  }).then(response => {
    let data: sys.Result<any> = response.data
    if (data.code === '0000') {
      menuTree.value = data.data
    }
  })
}

onMounted(init)

// 进当前用户界面刷新菜单配置 后续需要新增 websocket 通知更新
event.on(UpdateMenu, init)
event.on(UpdateOrgAndRoleEvent, init)
onUnmounted(() => {
  event.off(UpdateMenu, init)
  event.off(UpdateOrgAndRoleEvent, init)
})
</script>

<style scoped>

#logo {
  width: auto;
  display: flex;
  justify-content: center;
  align-content: center;
}

/* 删除menu侧边线条*/
.el-menu {
  border-right: 0;
}

.menu-text {
  user-select: none;
}
</style>